<template>
  <el-dialog title="新增角色" :visible="visible" width="80%" @close="handleCancel">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" class="demo-form-inline">
      <div class="row">
        <el-form-item label="角色名称" prop="name" class="half-width">
          <el-input v-model="form.name" class="input-width" />
        </el-form-item>
        <el-form-item label="角色码" prop="code" class="half-width">
          <el-input v-model="form.code" class="input-width" />
        </el-form-item>
      </div>
      <div class="row">
        <el-form-item label="备注" prop="remark" class="full-width">
          <el-input v-model="form.remark" class="input-width" />
        </el-form-item>
      </div>
      <div class="row">
        <el-form-item label="状态" prop="status" class="full-width">
          <el-select v-model="form.status" placeholder="请选择" class="input-width">
            <el-option label="启用" value="1" />
            <el-option label="停用" value="0" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addRoleAPI, confirmRoleCodeAPI } from '@/api/role'
import { Message } from 'element-ui'
export default {

  name: 'AddRoleForm',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // companyId: this.$store.getters.companyId,
      // orgId: this.$store.getters.orgId,
      // tenantId: this.$store.getters.tenantId,
      form: {
        name: '',
        code: '',
        remark: '',
        companyId: this.$store.getters.companyId,
        orgId: this.$store.getters.orgId,
        tenantId: this.$store.getters.tenantId,
        status: '1'
      },

      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '角色码不能为空', trigger: 'blur' },
          { validator: this.validateRoleCode, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    // 检查是否当前角色码是否可用

    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.handleConfirmSubmitAddRole()
          this.$emit('update:visible', false)

          // 重置表单，由于执行顺序问题，会导致发送的请求中的请求内容被清空
          // this.resetForm()
        } else {
          Message.warning('本次操作失败')
        }
      })
    },

    // 增加角色
    handleConfirmSubmitAddRole() {
      // this.form.companyId = this.companyId;
      // this.form.orgId = this.orgId;

      // 调用异步函数并等待结果
      addRoleAPI(this.form)
        .then(response => {
          if (response === true) {
            Message.success('新增角色成功')
          } else {
            Message.warning('请求发送成功，但增加用户失败')
          }
        })
        .catch(error => {
          // eslint-disable-next-line no-undef
          callback(error)
        })
    },

    // 验证当前角色码是否可用
    validateRoleCode(rule, value, callback) {
      if (!value) {
        callback(new Error('角色码不能为空'))
      } else {
        const code = this.form.code
        confirmRoleCodeAPI({ code: code })
          .then(response => {
            if (response === 'unusable') {
              callback(new Error('角色码已存在'))
            } else {
              callback()
            }
          })
          .catch(error => {
            callback(error)
          })
      }
    }

    // 重置表单方法
    // resetForm() {
    //   this.$refs.formRef.resetFields()
    // }
  }
}
</script>

<style scoped>
.demo-form-inline .row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.demo-form-inline .half-width {
  flex: 1;
  display: flex;
  align-items: center;
}
.demo-form-inline .full-width {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
}
.demo-form-inline .el-form-item {
  flex: 1;
  display: flex;
  align-items: center;
}
.input-width {
  flex: 1;
  margin-left: 1%; /* Optional: adjust space between label and input */
}
</style>

